<template>
	<view style="min-height: 100vh;" class="animated fadeIn">
		<view class="contain">
			<u-navbar title="登录" :autoBack="true" bgColor="transparent" :titleStyle="{color:'#ffffff'}"
				leftIconColor="#ffffff"></u-navbar>
		<!-- 	<view class="mask-layer bg-scroll"
				:style=" 'background-image: url(' + ima_url+'/static/Applets/static/login_bg.png);' "></view> -->
			<!-- <view class="mask-layer2"></view> -->
			<view :style="'margin-top:' + navH + 'px;'" style="z-index: 99;">
				<view style="padding: 80px 40px 50px;">
					<view
						style="padding:10px 10px;display: flex;border-radius: 40px;border: 1px solid #ffffff;height: 50px;">
						<!-- <u-input placeholder="手机号/用户名" prefixIcon="phone" v-model="user_name"
							prefixIconStyle="font-size: 22px;color: #909399;border-right:1px solid #C2C2C2;padding-left:10px;padding-right:10px;margin-right:10px;"
							customStyle="border-radius:40px;border:1px solid #CDE6FA!important;height:50px;">
						</u-input> -->
						<view style="align-self: center;padding-left:10px;padding-right:10px;margin-right:10px;">
							<u-icon name="phone" size="22" color="#ffffff"></u-icon>
						</view>
						<view style="display: flex;border-left: 1px solid #ffffff;">
							<input type='text' placeholder='手机号/用户名' v-model="user_name" placeholder-style="color:#ffffff;"
								style="align-self: center;padding-left: 10px;color: #ffffff;"></input>
						</view>
					</view>
					<view
						style="padding:10px 10px;display: flex;border-radius: 40px;border: 1px solid #ffffff;height: 50px;margin-top: 20px;">
						<!-- <u-input password placeholder="密码" prefixIcon="lock" v-model="password"
							prefixIconStyle="font-size: 22px;color: #909399;border-right:1px solid #C2C2C2;padding-left:10px;padding-right:10px;margin-right:10px;"
							customStyle="border-radius:40px;border:1px solid #CDE6FA!important;height:50px;">
						</u-input> -->
						<view style="align-self: center;padding-left:10px;padding-right:10px;margin-right:10px;">
							<u-icon name="lock" size="22" color="#ffffff"></u-icon>
						</view>
						<view style="display: flex;border-left: 1px solid #ffffff;">
							<input password type="text" placeholder='请输入密码' v-model="password" placeholder-style="color:#ffffff;"
								style="align-self: center;padding-left: 10px;color: #ffffff;"></input>
						</view>
					</view>
				</view>

				<view style="padding: 30px 40px 0;">
					<u-button color="#5AC725" text="登录" @click="login"
						customStyle="border-radius:40px;height:50px;">
					</u-button>
				</view>

				<view style="width: 100%;margin-top: 20px;">
					<u-row justify="space-between">
						<u-col span="3">
							<view style="font-size: 18px;text-align: right;color: white;" @click="home">
								首页
							</view>
						</u-col>
						<u-col span="3"></u-col>
						<u-col span="3"></u-col>
						<u-col span="3">
							<view style="font-size: 18px;color: white;" @click="register">注册</view>
						</u-col>
					</u-row>
				</view>
				<view style="width: 100%;margin-top: 10px;">
					<u-row justify="space-between">
						<u-col span="3"></u-col>
						<u-col span="3"></u-col>
						<u-col span="3"></u-col>
						<u-col span="3">
							<view style="font-size: 14px;color: white;" @click="forget">忘记密码</view>
						</u-col>
					</u-row>
				</view>

				<view style="height: 20px;width: 100%;"></view>
				<u-divider text="快捷登录" textColor="#ffffff"></u-divider>
				<view
					style="margin: 20px auto;display: flex;align-items: center;flex-direction: column;padding-bottom: 10px;">
					<!-- <view style="co">第三方登陆</view> -->
					<view style="margin-top: 10px;">
						<u-button type="success" text="手机号快捷登录" @click="getUserProfile" open-type="getPhoneNumber"
							icon="phone" @getphonenumber="getPhoneNumber"></u-button>
					</view>
				</view>

			</view>
		</view>
	</view>
</template>

<script>
	import {
		BASE_URL
	} from '@/config/app';
	import {
		mapState,
		mapGetters
	} from "vuex";
	import {
		login,
		wxLogin,
		recommend
	} from '@/api/public.js'
	const BACK_URL = "login_back_url";
	export default {
		data() {
			return {
				ima_url: BASE_URL,
				user_name: '',
				password: '',
				theme_color: getApp().globalData.theme_color,
				// 微信意见登入code
				login_phonecode: '', //号码的时候用
				phone_encryptedData: '',
				phone_iv: '',

				login_Infocode2: '', //获取公众信息的时候用
				Info_encryptedData: '',
				Info_iv: '',
				headimgurl: '', //头像
				nickname: '', //微信昵称
				sex: '',
				country: '', //国家
				province: '',
				city: '',

				getUIIsShow: false, //获取微信信息的API是否选择了授权
				getUIRefuseIsShow: false, //获取微信信息的API是否选择了拒绝
				getPNIsShow: false, //获取微电话号码的API是否选择了授权
				getPNRefuseIsShow: false, //获取微电话号码的API是否选择了拒绝

				navH: '',
				radio: false
			}
		},
		computed: {
			...mapGetters(['isLogin', 'app_token', 'wxUserInfo'])
		},
		onLoad(options) {
			this.navH = getApp().globalData.navHeight / 2;
		},
		methods: {
			home() {
				uni.switchTab({
					url: '/pages/index/index'
				})
			},
			login() {
				var that = this;
				if (that.user_name == '') {
					return that.$util.Tips({
						title: '请输入账号'
					});
				}
				if (that.password == '') {
					return that.$util.Tips({
						title: '请输入密码'
					});
				}
				login({
					user_name: that.user_name,
					password: that.password
				}).then(res => {
					if (res.status == 1) {
						that.$store.commit("LOGIN", {
							'app_token': res.data.app_token
						});
						that.$store.commit("UPDATE_USERINFO", res.data)
						that.$store.commit("UPDATE_USER_ID", {
							'user_id': res.data.user_id
						})

						that.$util.Tips({
							title: res.msg,
							icon: 'success',
							duration: 2000
						});

						let backUrl = that.$Cache.get(BACK_URL) || "/pages/index/index";
						that.$Cache.clear(BACK_URL);
						if (backUrl.indexOf('/pages/users/login/index') !== -1) {
							backUrl = '/pages/index/index';
						}
						setTimeout(res=>{
							uni.reLaunch({
								url: backUrl
							});
						},2000)
						

					} else {
						that.$util.Tips({
							title: res.msg,
							icon: 'error',
							duration: 2000
						});
					}
				})
			},
			register() {
				uni.navigateTo({
					url: '/pages/users/register/index'
				})
			},
			forget() {
				uni.navigateTo({
					url: '/pages/users/forget/index'
				})
			},
			// 获取微信信息
			getUserProfile: function() {
				var that = this;
				wx.login({
					success(res_code) {
						that.login_phonecode = res_code.code;
					}
				});

				wx.getUserProfile({
					desc: '用于完善会员资料',
					success: (res) => {
						var rawData = JSON.parse(res.rawData);

						that.headimgurl = rawData.avatarUrl; //头像
						that.nickname = rawData.nickName; //微信昵称
						// 性别 0：未知、1：男、2：女							
						that.sex = rawData.gender;
						that.country = rawData.country; //国家
						that.province = rawData.province;
						that.city = rawData.city;

						that.getUIIsShow = true; //获取微信信息的API是否选择了授权
						that.getUIRefuseIsShow = false; //获取微信信息的API是否选择了拒绝	

						// 电话号码已经先授权获取了
						if (that.getPNRefuseIsShow == false && that.getPNIsShow == true) {
							that.packLogin();
							// 请求登入后初始化
							that.getUIIsShow = false; //获取微信信息的API是否选择了授权
							that.getUIRefuseIsShow = false; //获取微信信息的API是否选择了拒绝				
							that.getPNIsShow = false; //获取微电话号码的API是否选择了授权
							that.getPNRefuseIsShow = false; //获取微电话号码的API是否选择了拒绝

						} else if (that.getPNRefuseIsShow == true) {
							uni.$u.toast('拒绝授权获取微信电话号码,没办法登入')
							that.getUIIsShow = false; //获取微信信息的API是否选择了授权
							that.getUIRefuseIsShow = false; //获取微信信息的API是否选择了拒绝				
							that.getPNIsShow = false; //获取微电话号码的API是否选择了授权
							that.getPNRefuseIsShow = false; //获取微电话号码的API是否选择了拒绝

						}

					},
					fail(res) {
						that.getUIIsShow = false; //获取微信信息的API是否选择了授权
						that.getUIRefuseIsShow = true; //获取微信信息的API是否选择了拒绝	

						// 电话号码已经先授权获取了
						if (that.getPNRefuseIsShow == false && that.getPNIsShow == true) {

							// 因为获取微信信息拒绝授权，而电话号码已经授权  所以 初始化
							that.getUIIsShow = false; //获取微信信息的API是否选择了授权
							that.getUIRefuseIsShow = false; //获取微信信息的API是否选择了拒绝				
							that.getPNIsShow = false; //获取微电话号码的API是否选择了授权
							that.getPNRefuseIsShow = false; //获取微电话号码的API是否选择了拒绝

						} else if (that.getPNRefuseIsShow == true) {
							// 拒绝授权获取微信信息
							// 已经拒绝授权获取微信信息
							// 请求登入后初始化
							that.getUIIsShow = false; //获取微信信息的API是否选择了授权
							that.getUIRefuseIsShow = false; //获取微信信息的API是否选择了拒绝				
							that.getPNIsShow = false; //获取微电话号码的API是否选择了授权
							that.getPNRefuseIsShow = false; //获取微电话号码的API是否选择了拒绝			
						}

					}
				})

			},
			// 微信小程序  一建登入  获取电话号码
			getPhoneNumber: function(e) {
				var that = this;

				if (e.detail.errMsg == "getPhoneNumber:ok") {
					that.phone_encryptedData = e.detail.encryptedData;
					that.phone_iv = e.detail.iv;

					that.getPNIsShow = true; //获取微电话号码的API是否选择了授权
					that.getPNRefuseIsShow = false; //获取微电话号码的API是否选择了拒绝

					//微信信息已经先授权获取了
					if (that.getUIRefuseIsShow == false && that.getUIIsShow == true) {
						that.packLogin();
						// 请求登入后初始化						
						that.getUIIsShow = false; //获取微信信息的API是否选择了授权
						that.getUIRefuseIsShow = false; //获取微信信息的API是否选择了拒绝				
						that.getPNIsShow = false; //获取微电话号码的API是否选择了授权
						that.getPNRefuseIsShow = false; //获取微电话号码的API是否选择了拒绝
					} else if (that.getUIRefuseIsShow == true) {
						// 已经拒绝授权获取微信信息
						uni.$u.toast('拒绝授权获取微信信息,没办法登入')
						// 请求登入后初始化
						that.getUIIsShow = false; //获取微信信息的API是否选择了授权
						that.getUIRefuseIsShow = false; //获取微信信息的API是否选择了拒绝				
						that.getPNIsShow = false; //获取微电话号码的API是否选择了授权
						that.getPNRefuseIsShow = false; //获取微电话号码的API是否选择了拒绝	
					}


				} else if (e.detail.errMsg == "getPhoneNumber:fail user deny") {
					// 拒绝授权获取电话号码
					that.getPNIsShow = false; //获取微电话号码的API是否选择了授权
					that.getPNRefuseIsShow = true; //获取微电话号码的API是否选择了拒绝

					//微信信息已经先授权获取了
					if (that.getUIRefuseIsShow == false && that.getUIIsShow == true) {

						// 请求登入后初始化						
						that.getUIIsShow = false; //获取微信信息的API是否选择了授权
						that.getUIRefuseIsShow = false; //获取微信信息的API是否选择了拒绝				
						that.getPNIsShow = false; //获取微电话号码的API是否选择了授权
						that.getPNRefuseIsShow = false; //获取微电话号码的API是否选择了拒绝


					} else if (that.getUIRefuseIsShow == true) {

						// 已经拒绝授权获取微信信息		
						// 请求登入后初始化
						that.getUIIsShow = false; //获取微信信息的API是否选择了授权
						that.getUIRefuseIsShow = false; //获取微信信息的API是否选择了拒绝				
						that.getPNIsShow = false; //获取微电话号码的API是否选择了授权
						that.getPNRefuseIsShow = false; //获取微电话号码的API是否选择了拒绝											
					}

				}
			},


			packLogin() {
				var that = this;
				wxLogin({
					encryptedData: that.phone_encryptedData,
					iv: that.phone_iv,
					code: that.login_phonecode,
					headimgurl: that.headimgurl,
					nickname: that.nickname,
					sex: that.sex,
					country: that.country,
					province: that.province,
					city: that.city,
					supplier_id: getApp().globalData.supplier_id
				}).then((res) => {
					if (res.status == -1) {
						that.$util.Tips({
							title: res.msg,
							icon: 'error'
						});
					} else {
						
						recommend({
							app_token: res.data.app_token,
							parent_id: getApp().globalData.recommend_id || that.$Cache.get('RECOMMEND_ID'),
							supplier_id: getApp().globalData.supplier_id
						}).then(res => {
							console.log('注册 绑定推荐人', res.msg)
						})
						
						that.$store.commit("LOGIN", {
							'app_token': res.data.app_token
						});
						that.$store.commit("UPDATE_WECHATUSERINFO", res.data)

						that.$store.commit("UPDATE_USER_ID", {
							'user_id': res.data.user_id
						})

						uni.showToast({
							title: res.msg,
							icon: 'success',
							duration: 2000
						})
						var url = that.$Cache.get(BACK_URL);
						let backUrl = url || "/pages/index/index";
						that.$Cache.clear(BACK_URL);
						if (backUrl.indexOf('/pages/users/login/index') !== -1) {
							backUrl = '/pages/index/index';
						}
						setTimeout(res=>{
							uni.reLaunch({
								url: backUrl
							});
						},2000)
					}
				}).catch(err => {
					console.log(err)
				})

			},

		}
	}
</script>

<style lang="scss" scoped>
	.contain {
		width: 100%;
		height: 100vh;
		background: $theme-color;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;

		.logo {
			width: 135rpx;
			height: 135rpx;
			max-width: 135rpx;
			min-width: 135rpx;
			max-height: 135rpx;
			min-height: 135rpx;
		}
	}

	@keyframes scroll {
		100% {
			background-position: 0px -2300px;
		}
	}

	.contain .mask-layer {
		position: fixed;
		z-index: 2;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		perspective: 1000px;
		background-size: cover;
	}

	.contain .mask-layer.bg-scroll {
		animation: scroll 70s linear infinite;
	}

	.contain .mask-layer2 {
		background: rgba(0, 0, 0, 0.45);
		position: fixed;
		z-index: 3;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
	}

</style>